<template>
  <div class="app-container calendar-list-container">
    <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" :height="height">
      <div>
        <el-form :model="entity" :rules="dataRule" ref="entity" label-width="80px" size="small">
          <el-row>
            <el-col :span="span" v-for="(item,index) in columns" :key="index">
              <el-form-item :label="item.label" :prop="item.prop" v-if="item.type == 'text'">
                <el-input v-model="entity[item.prop]" :placeholder="item.placeholder" :type="item.inputType|'text'" :disabled=" item.disabled| false"
                  :readonly="item.readonly| false"></el-input>
              </el-form-item>
              <el-form-item :label="item.label" :prop="item.prop" v-if="item.type == 'select'">
                <el-select v-model="entity[item.prop]" :placeholder="item.placeholder" :disabled="item.disabled| false" :readonly="item.readonly| false">
                  <el-option v-for="(li,cindex) in selectData[item.prop]" :label="li[item.itemName]" :value="li[item.itemValue]" :key="cindex"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/router/axios'
import { Message, MessageBox } from 'element-ui'

export default {
  name: 'formDialog',
  data () {
    return {
      dialogVisible: false,
      entity: {},
      selectData: {}
    }
  },
  props: {
    span: {
      type: Number,
      default: function () {
        return 12
      }
    },
    url: {
      type: String,
      default: function () {
        return null
      }
    },
    title: {
      type: String,
      default: function () {
        return null
      }
    },
    width: {
      type: String,
      default: function () {
        return '800px'
      }
    },
    height: {
      type: String,
      default: function () {
        return '600px'
      }
    },
    dataRule: {
      type: Object,
      default: function () {
        return {}
      }
    },
    columns: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  created () {
    this.initData()
  },
  computed: {},
  methods: {
    initData () {
      this.columns.forEach(element => {
        if (element.type == 'select') {
          this.loadSelect(element)
        }
      });
    },
    loadSelect (row) {
      if (row.dataUrl) {
        this.doUrl(row.dataUrl).then(data => {
          if (data) {
            this.selectData[row.prop] = data
          }
        })
      } else {
        this.selectData[row.prop] = dataList
      }
    },
    setUrl (url) {
      this.url = url
    },
    show (entity) {
      this.dialogVisible = true
      this.entity = entity
    },
    save () {
      this.$refs['entity'].validate((valid) => {
        if (valid) {
          this.handleUrl(this.entity).then((data) => {
            if (data) {
              this.dialogVisible = false
              this.$emit('success')
            }
          })
        }
      })
    },
    handleUrl (data) {
      return request({
        url: this.url,
        method: 'post',
        data: data
      })
    },
    doUrl (url, data) {
      return request({
        url: url,
        method: 'post',
        data: data || { key: 'key' }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
